<template>
	<view>
		<view class="bannerBg">
			<gui-swiper @taped="taped" :swiperItems="swiperItems" :width="690" :height="340" borderRadius="16rpx"
				:margin="0" :spacing="0" :indicatorActiveWidth="40" :indicatorHeight="14" :indicatorWidth="14"
				indicatorColor="rgba(255,255,255,0.8)" indicatorActiveColor="#fff"></gui-swiper>
		</view>
		<view class="content">
			<view class="tool-box flex-ac-wrap bgfff radius15">
				<view class="item flex-dc-ac" v-for="(item,index) in menuList" :key="index" @tap="handleJump(item)">
					<!-- <image class="item-icon" :src="item.icon" @error="$u.imgError(item,'icon')" mode="heightFix" style="width: auto;"></image> -->
					<view class="item-icon">
						<gui-imageLoading height="65" :src="item.icon" mode="heightFix"
							:showOpacity="true"></gui-imageLoading>
					</view>
					<text class="qoverDot">{{item.name}}</text>
				</view>
			</view>
			<view class="link bgfff radius15">
				<view class="title-line flex-ac">
					<view class="line"></view>
					<text>综合系统</text>
				</view>
				<view class="link-list">
					<view class="item flex-ac-jb" v-for="(item,index) in zhList" :key="item.id"
						@tap="$u.to('/pages/index/paySystem?id='+item.id)">
						<view class="link-icon">
							<gui-imageLoading width="60" height="60" borderRadius="5rpx" :src="item.icon"
								mode="aspectFill" :showOpacity="true"></gui-imageLoading>
						</view>
						<view class="info flex1">
							<text class="bold">{{item.name}}</text>
							<text class="desc">{{item.synopsis}}</text>
						</view>
						<text class="gui-icons">&#xe601;</text>
					</view>
				</view>
			</view>
			<!-- <button @click="handleJump2">
				测试跳转小程序
			</button> -->
		</view>
		<!-- 居中弹出 -->
		<gui-popup ref="guipopup" width="480rpx">
			<view class="gui-relative gui-box-shadow bgfff popup radius15 f26">
				<view class="close-btn gui-icons bold flex-ac-je c999" @tap="handleClose()">&#xe610;</view>
				<view class="popup-con flex-dc-ac">
					<text class="bold title f28">温馨提示</text>
					<image class="popup-img" src="../../static/index/vipTip.png" mode="widthFix" style="height: auto;">
					</image>
					<text>使用工具功能</text>
					<text class="primary-color">请先充值成为会员</text>
					<view class="saveBtn" @tap="goPay">立即充值</view>
				</view>

			</view>
		</gui-popup>
	</view>
</template>

<script>
	var img =
		"https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2MHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=90";
	export default {
		data() {
			return {
				isSubscribe: false,
				menuList: [], //菜单
				swiperItems: [], //轮播图
				zhList: []
			}
		},
		onLoad() {
			this.getMenu()
			this.getBanner()
			this.getZh()
			// this.initConfig();
			if (uni.getStorageSync('token')) {
				this.getUser()
			}
		},
		methods: {
			handleJump2() {
				this.$u.to(`/pages/index/openWeapp`)
			},
			taped(e) {
				if (this.swiperItems[e].openType == 1) { // 内链
					this.$u.to(`/pages/index/newsDetail?id=${this.swiperItems[e].openParam}`)
				} else { // 外链
					window.location.href = this.swiperItems[e].openParam
				}
			},
			checkSubscribe() {
				let that = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userInfo']) {
							// 用户未授权
							wx.showModal({
								title: '提示',
								content: '请关注我们的公众号后再使用',
								success(modalRes) {
									if (modalRes.confirm) {
										wx.openSetting({
											success(settingRes) {
												if (settingRes.authSetting['scope.userInfo']) {
													// 用户在设置页关注了公众号
													that.isSubscribe = true;
												}
											}
										});
									}
								}
							});
						} else {
							// 用户已授权
							uni.getUserInfo({
								success(infoRes) {
									that.isSubscribe = infoRes.userInfo.subscribe;
								}
							});
						}
					}
				});
			},
			goPay() {
				this.handleClose()
				this.$u.to('/pages/user/vipRecharge')
			},
			handleOpen: function() {
				this.$refs.guipopup.open();
			},
			handleClose: function() {
				this.$refs.guipopup.close();
			},
			getUser() {
				this.$http.post('/api/oauth/info').then(res => {
					let result = res.data
					console.log('用户信息', result)
					this.userInfo = result
					this.$u.vuex('vuex_userInfo', result);
				})
			},
			handleJump(item) {
				if (item.type == 1) {
					if (this.vuex_userInfo.isVip == 1) {
						if (item.shAction) { // 直接跳转
							// this.$u.to(`/pages/webview/webview?menuId=${item.id}&userId=${this.vuex_userInfo.id}`)
							location.href = item.url;
						} else { // 展示二维码
							this.$u.to('/pages/index/codeLogin?id=' + item.id)
						}
					} else {
						this.handleOpen()
					}
				} else {
					this.$u.to('/pages/index/news?id=' + item.id)
				}
			},
			getZh() {
				this.$http.get('/api/home/synthesisList').then(res => {
					let result = res.data
					console.log('综合列表', result)
					this.zhList = result
				})
			},
			getMenu() {
				this.$http.get('/api/home/menuList').then(res => {
					let result = res.data
					console.log('菜单', result)
					this.menuList = result
				})
			},
			getBanner() {
				this.$http.get('/api/home/bannerList').then(res => {
					let result = res.data
					console.log('轮播图', result)
					this.swiperItems = result
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #FFF2F2;
	}

	.content {
		padding: 0 30rpx 30rpx 30rpx;
	}

	.bannerBg {
		background: url(../../static/index/banner.jpg) no-repeat;
		background-size: 100% 100%;
		padding: 80rpx 30rpx 0 30rpx;
	}

	.tool-box {
		margin-top: 20rpx;
		padding: 60rpx 0 5rpx 0;

		.item {
			width: 138rpx;
			padding: 0 5rpx;
			margin-bottom: 54rpx;
			color: #4A4A4A;

			.item-icon {
				min-width: 50%;
				height: 65rpx;
				margin-bottom: 16rpx;
			}
		}
	}

	.link {
		border-radius: 15rpx;
		margin-top: 20rpx;
		padding: 30rpx 25rpx;

		.link-list {
			.item {
				padding: 25rpx 20rpx;
				margin-top: 20rpx;
				border: 1rpx solid #eee;

				.link-icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 5rpx;
				}

				.info {
					margin: 0 20rpx 0 30rpx;
				}
			}
		}
	}

	.popup {
		position: relative;
		padding: 52rpx 80rpx 45rpx 80rpx;

		.close-btn {
			position: absolute;
			right: 0;
			top: 0;
			width: 100rpx;
			height: 60rpx;
			padding-right: 20rpx;
		}

		.popup-con {
			.title {}

			.popup-img {
				width: 215rpx;
				margin: 20rpx 0 30rpx 0;
			}

			.saveBtn {
				width: 269rpx;
				height: 64rpx;
				font-size: 24rpx;
				margin-top: 36rpx;
			}
		}
	}
</style>